<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Mini Vue</title>
  </head>
  <body>
    <div id="app">
        <h1>差值表达式</h1>
        <h3>{{ msg }}</h3>
        <h3>{{ count }}</h3>

        <h1>v-text</h1>
        <h3 v-text="msg"></h3>
        <h3 v-text="count"></h3>

        <h1>v-html</h1>
        <div v-html="target"></div>

        <h1>v-on</h1>
        <button @click="clickHandler">触发点击事件</button>

        <h1>v-model</h1>
        <input type="text" v-model="msg">
        <input type="text" v-model="count">
    </div>

    <script src="./js/dep.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/observer.js"></script>
    <script src="./js/compiler.js"></script>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                count: 100,
                target: '<p>我是 v-html 指令创建的 p 标签</p>',
                person: {name: 'zs'}
            },
            methods: {
              clickHandler(){
                console.log("使用 v-on 绑定事件")
                alert("使用 v-on 绑定事件")
              }
            }
        })
        console.log(vm.msg)
        // vm.msg = { test: 'Hello'}
    </script>
  </body>
</html>
